@import 'tailwindcss';
/*
  ---break---
*/
@custom-variant dark (&:is(.dark *));

@config '../../../tailwind.config.ts';

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

/* 变量定义 */
:root {
  text-autospace: normal;
  --font-sans:
    var(--font-noto-sans-sc), var(--font-inter), -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;
  --font-timer: var(--font-timer);
  --keyboard-height: 0px;
  --custom-shape-color: #000000;
  --legacy-mode: 0;
  /* 网页版字体缩放变量 */
  --font-scale: 1;
  --base-font-size: 16px;
  --radius: 0.625rem;
  --background: #fafafa;
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

/* 暗黑模式 */
.dark {
  --foreground: oklch(0.985 0 0);
  --background: #171717;
  --custom-shape-color: #ffffff;
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

/* 兼容性样式 - 针对旧版WebView */
.legacy-browser {
  /* 确保使用简单的CSS特性 */
  color-scheme: light dark;
}

/* 在旧浏览器模式时应用特殊样式 */
html[style*='--legacy-mode: 1'] {
  /* 使用简单的颜色方案，避免使用oklch */
  --background: #fafafa;
  --foreground: #000000;
}

html[style*='--legacy-mode: 1'].dark {
  --background: #171717;
  --foreground: #ffffff;
}

.dark .dark\:invert {
  filter: invert(1);
}

/* SVG 样式 */
.custom-cup-shape svg *,
.custom-shape-svg-container svg *,
.outline-only svg * {
  stroke: var(--custom-shape-color) !important;
  fill: none !important;
  stroke-width: 1.5px !important;
}

.custom-cup-shape svg,
.custom-shape-svg-container svg {
  width: 300px !important;
  height: 300px !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* 基础样式 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 移除移动端焦点边框 */
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 移除按钮和输入框的默认样式 */
button:focus,
input:focus,
textarea:focus,
select:focus,
[role='button']:focus {
  outline: none !important;
  box-shadow: none !important;
}

html {
  /* 动态字体大小：基础大小 × 缩放比例 */
  font-size: calc(var(--base-font-size) * var(--font-scale));
}

html,
body {
  color: var(--foreground);
  background: var(--background);
  position: fixed;
  inset: 0;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* 底部间距容器 */
.scroll-with-bottom-bar,
.content-area {
  padding-bottom: calc(var(--safe-area-bottom) + 100px);
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--background);
  box-shadow: 0 -1px 0 0 var(--background);
}

/* 键盘弹出时的焦点元素处理 */
input:focus,
textarea:focus,
select:focus,
[contenteditable]:focus {
  position: relative;
  z-index: 10;
  scroll-margin-top: 100px;
  scroll-margin-bottom: 100px;
}

/* 修复 vaul drawer 滚动锁定时的 body 样式问题 */
body[data-scroll-locked] {
  overflow: hidden !important;
  overscroll-behavior: contain;
  /* 保持原有的 position: fixed 和 inset: 0 以维持布局 */
  position: fixed !important;
  inset: 0 !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  /* 不重置 margin，让 mx-auto 能正常工作 */
}

/* 模态框底部按钮 */
.modal-bottom-button {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  margin: 16px 0;
  transition: bottom 0.3s ease;
}

/* 键盘弹出时底部按钮处理 */
.keyboard-is-open .modal-bottom-button {
  position: fixed;
  bottom: var(--keyboard-height, 0px);
  left: 0;
  right: 0;
  padding: 8px 16px;
  background: var(--background, #fafafa);
  margin: 0;
  z-index: 60;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* 计时器字体 - 用于时间显示，保证数字对齐 */
.timer-font {
  font-family: var(--font-timer);
  font-feature-settings:
    'tnum' on,
    'lnum' on; /* 等宽数字 + 衬线数字 */
  font-variant-numeric: tabular-nums lining-nums; /* 现代写法 */
  letter-spacing: 0.02em; /* 轻微字间距提升可读性 */
}

/* 数字字体 - 用于价格、统计等需要对齐的数字 */
.numeric-font {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums; /* 等宽数字 */
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.99);
  }
  to {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.99);
  }
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-0.5rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideOutToTop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.5rem);
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(0.5rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideOutToBottom {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(0.5rem);
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-0.5rem);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutToLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-0.5rem);
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(0.5rem);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(0.5rem);
  }
}

.animate-in {
  animation:
    fadeIn 150ms ease,
    zoomIn 150ms ease;
}

.animate-out {
  animation:
    fadeOut 150ms ease,
    zoomOut 150ms ease;
}

.fade-in-0 {
  animation: fadeIn 150ms ease;
}

.fade-out-0 {
  animation: fadeOut 150ms ease;
}

.zoom-in-95 {
  animation: zoomIn 150ms ease;
}

.zoom-out-95 {
  animation: zoomOut 150ms ease;
}

.slide-in-from-top-2 {
  animation: slideInFromTop 150ms ease;
}

.slide-out-to-top-2 {
  animation: slideOutToTop 150ms ease;
}

.slide-in-from-bottom-2 {
  animation: slideInFromBottom 150ms ease;
}

.slide-out-to-bottom-2 {
  animation: slideOutToBottom 150ms ease;
}

.slide-in-from-left-2 {
  animation: slideInFromLeft 150ms ease;
}

.slide-out-to-left-2 {
  animation: slideOutToLeft 150ms ease;
}

.slide-in-from-right-2 {
  animation: slideInFromRight 150ms ease;
}

.slide-out-to-right-2 {
  animation: slideOutToRight 150ms ease;
}

/*
  ---break---
*/

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

/*
  ---break---
*/

@layer base {
  * {
    @apply border-border;
    outline: none;
  }
  body {
    @apply bg-background text-foreground;
  }
}
